<template>
	<div class="pageBox">
		<div class="top">
			<h2>编辑页面</h2>
		</div>
		<div class="pageTitle">
			<span class="title">页面标题：</span>
			<a-input style="width: 400px;" placeholder="请输入页面标题" v-model="list.title" />
		</div>
		<div class="content">
			<span class="title con"><a>详情</a>（html）<a>：</a></span>
			<div id="editorElem"></div>
		</div>
		<div class="button">
			<a-button type="primary" @click="sub">提交</a-button>
			<a-button @click="back">取消</a-button>
		</div>
	</div>
</template>

<script>
	import E from "wangeditor";
	export default {
		data() {
			return {
				editorContent: '',
				list: {
					title: '',
					content: ''
				}
			}
		},
		created(){
			this.$ajax.get('/kmd-field-web/adm/selectDetailPageById',{
				params:{
					pageId:this.$route.params.id
				}
			})
			.then(res => {
				this.list.title = res.data.title
				this.editor.txt.html(res.data.content);
			})
		},
		mounted() {
			this.initEditor();
		},
		methods: {
			async initEditor() {
				this.editor = new E("#editorElem");
				this.editor.customConfig.onchange = (html) => {
					this.editorContent = html
				}
				this.editor.customConfig.uploadImgShowBase64 = true;
				this.editor.create(); //创建编辑器
			},
			//提交
			sub() {
				this.list.content = this.editor.txt.html();
				if(this.list.title == 0) {
					this.$message.error('页面标题不能为空');
					return;
				} else {
					let formdata = new FormData();
					formdata.append("pageId",this.$route.params.id);
					formdata.append("title",this.list.title);
					formdata.append("content",this.list.content);
					this.$ajax.post('/kmd-field-web/adm/editPage', formdata, {
							headers: {
								'Content-Type': 'multipart/form-data'
							}
						})
						.then(res => {
							if(res.data.statusCode ==200){
								this.$message.success('修改页面成功');
								history.go(-1);
							}else{
								this.$message.error(res.data.message);
							}
						})
				}
			},
			back(){
				history.go(-1);
			}
		},
	}
</script>

<style scoped>
	.pageTitle {
		margin-top: 30px;
	}
	
	.content {
		margin-top: 30px;
		overflow: hidden;
	}
	
	.title {
		margin-left: 100px;
		display: inline-block;
		width: 120px;
		text-align: right;
		font-size: 16px;
	}
	
	.title a {
		color: black;
		font-size: 16px;
	}
	
	.con {
		float: left;
		font-size: 14px;
		color: #CCCCCC;
	}
	
	#editorElem {
		width: 1000px;
		float: left;
	}
	
	.button {
		margin: 30px 0 200px 220px;
	}
	
	.button button {
		margin-right: 20px;
	}
</style>